<template>
  <div>
    <div class="header">
      <div class="logo"></div>
     
      <div id="navigation">

      </div>
    </div>
      
      <i>所属城市:{{result.province}}{{result.city}}&nbsp;&nbsp;&nbsp;现在疫情情况</i><br>
      <i>{{now_time}}</i>
    <div v-for="item in city.data.list" :key="item.name">
      <div v-for="item1 in item.city" :key="item1.name">
    <div class="data">
      <i></i>
      <div v-if=" item1.name == cs">
            <el-row :gutter="5">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <div>{{ item1.conNum }}</div>
                  <div>累计确诊</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <div>{{item1.susNum}}</div>
                  <div>现有疑似</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <div>{{ item1.deathNum }}</div>
                  <div>累计死亡</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="5">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div>{{ item1.cureNum }}</div>
              <div>累计治愈</div>
            </div> </el-col
          ><el-col :span="8">
            <div class="grid-content bg-purple">
              <div>{{item1.econNum}}</div>
              <div>现有重症</div>
            </div> </el-col
          ><el-col :span="8">
            <div class="grid-content bg-purple">
              <div v-if="item1.jwsr == ''">{{0}}</div>
              <div>境外输入</div>
            </div>
          </el-col>
        </el-row>
        </div>
    </div></div></div><br><br>
    <div class="content">
      <div class="content_float">
        <div class="content_float_header"><i class="iconfont icon-yiyuan1" style="margin-left:5px;"></i>附近医院</div>

        <div
          @click="toMap(item)"
          class="item2"
          v-for="item in hospitalList"
          :key="item.id"
        >
          <div class="item" v-if="item.city == result.city">
            <div class="iconfont icon-yiyuan" style="margin-left:10px;">{{ item.name }}</div>
            <div v-if="item.flags" style="margin-left:10px;">{{ item.flags }}</div>
            <div v-else style="margin-left:10px;">暂无标记</div>
            <div style="margin-left:10px;">{{ item.province + " " + item.city + " " + item.area }}</div>
          </div>
        </div>
      </div>
      <div class="content_right">
        <div style="color: #fff;
            font-weight: 800;
            font-size: 22px;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: rgba(41, 36, 36, 0.452);
            border-radius: 10px;"><i class="iconfont icon-yisheng2" style="margin-left:5px;"></i> 名医在线</div>
            <i>请选择预约时间：</i><el-time-select
              placeholder="起始时间"
              v-model="startTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }">
            </el-time-select>
            <el-time-select
              placeholder="结束时间"
              v-model="endTime"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                minTime: startTime
              }">
            </el-time-select>
        <div class="wrap animate__animated animate__backInDown">
          <div class="zhaopian">
            <div>
              <a href="https://www.chunyuyisheng.com/pc/doctor/clinic_web_3757ac2b75830aed/"><img
                class="zhaopian_img"
                src="https://resource.chunyu.mobi/@/media/images/2016/01/29/dac3f3ac54d4_w396_h396_.jpg?imageMogr2/thumbnail/150x"
              /></a>
              <span @click="chat()">可咨询</span>
            </div>
          </div>
          <div class="word_wrap">
            <div>
              <div class="name" >
                <ul>
                  <li>侯藏龙</li>
                  <li>脊柱科</li>
                  <li>医师</li>
                  <li>海军军医大学第一附属医院</li>
                </ul>
              </div><br>
            </div>
            <div></div>
          </div>
        </div>

        <div class="wrap animate__animated animate__backInDown">
          <div class="zhaopian animate__animated animate__backInDown">
            <div>
              <a href="https://www.chunyuyisheng.com/pc/doctor/2a82a178d3baa9a7b308/"><img
                class="zhaopian_img"
                src="https://resource.chunyu.mobi/@/media/images/8c61/76515e6f7286?imageMogr2/thumbnail/150x"
              /></a>
              <span @click="chat()">可咨询</span>
            </div>
          </div>
          <div class="word_wrap">
            <div>
              <div class="name">
                <ul>
                  <li>胡传忠</li>
                  <li>创伤科</li>
                  <li>主治医师</li>
                  <li>解放军总医院（301医院）</li>
                </ul>
              </div>
              
            </div>
            <div></div>
          </div>
        </div>

        <div class="wrap animate__animated animate__backInDown">
          <div class="zhaopian">
            <div>
              <a href="https://www.chunyuyisheng.com/pc/doctor/clinic_web_67bfae1c18b79184/"><img
                class="zhaopian_img"
                src="https://resource.chunyu.mobi/@/media/images/2017/05/29/443bad08b9b1_w802_h814_.jpg?imageMogr2/thumbnail/150x"
              /></a>
              <span @click="chat()">可咨询</span>
            </div>
          </div>
          <div class="word_wrap">
            <div>
              <div class="name">
                <ul>
                  <li>黄雅松</li>
                  <li>关节科</li>
                  <li>医师</li>
                  <li>空军军医大学西京医院</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="wrap animate__animated animate__backInDown">

          <div class="zhaopian">
            <div>
              <a href="https://www.chunyuyisheng.com/pc/doctor/7317356bb6d68a858b83/"><img
                class="zhaopian_img"
                src="https://resource.chunyu.mobi/@/media/images/6916/2b923263d5c3?imageMogr2/thumbnail/150x"
              /></a>
              <span @click="chat()">可咨询</span>
            </div>
          </div>
          <div class="word_wrap">
            <div>
              <div class="name">
                <ul>
                  <li>刘勇</li>
                  <li>关节科</li>
                  <li>医师</li>
                  <li>中山大学附属第一医院</li>
                </ul>
              </div>
              
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span><i id="sj"></i> 跳转至对话框...不想等待请按确认</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="ojbk">取 消</el-button>
        <a href="http://47.112.176.174/liaotian.html" target="blank" class="jjfly"><el-button type="primary" @click="ojbk">确 定</el-button></a> 
      </span>
    </el-dialog>

  </div>
</template>


<script>
import city from './city444.json'
import { mapActions, mapState } from "vuex";
import moment from 'moment'
export default {
  computed: {
    ...mapState("hospital", ["hospitalList"]),
  },

  
  created() {
    this.initMap();
    this.findAllHospital(this.obj);
    this.getTime();
  },
  mounted() {},
  data() {
    return {
      
      city,
      res: {},
      obj: {
        page: 1,
        pageSize: 100,
      },
      startTime: '',
      endTime: '',
      now_time:'',
      cs: "",
      result: {},
      dialogVisible:false,
      href:'',
      sj:30,
      timer:{},
    };
  },
  methods: {
    
    ...mapActions("hospital", ["findAllHospital"]),


    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    toMap(val) {
      console.log(val);
      this.$router.push({
        path: "/hospital/detail",
        query: {
          one: val.latitude,
          two: val.longitude,
        },
      });
    },
    
    getTime(){
      setInterval(()=>{
        this.now_time =  moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      },1000)
      
      // console.log(this.now_time)
    },
    chat(){
      this.dialogVisible = true;
      this.daojishi();
    },
    daojishi(){
      if (this.sj>0) {
       this.timer = setInterval(()=>{
        this.sj =this.sj-1;
        document.getElementById("sj").innerHTML = this.sj+"s后"
      },1000)
      
      } 
    },
    ojbk(){
      this.dialogVisible = false;
      clearInterval(this.timer);
      this.sj =30;
    },
    initMap() {
      AMap.plugin("AMap.CitySearch",() => {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity((status, result) => {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            // console.log(result)
            this.result = result;
            var province = result.province;
            var city = result.city;
            this.cs = result.city;
            this.cs = this.cs.slice(0,-1);
            document.getElementById("navigation").innerHTML =
              "您当前所在城市：" + province + city;
          }
        });
      });
    },
  },
};
</script>
<style scoped>
.table_data .grid-content {
  min-height: 60px;
  font-size: 18px;

  line-height: 60px;
  text-align: center;
}
.el-row {
  margin-bottom: 5px;

}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fbf5ef;
}
.bg-purple-light {
  background: #e5e9f2;
}
.data .grid-content {
  border-radius: 4px;
  min-height: 100px;
}
.table_data .grid-content {
  border-radius: 4px;
  min-height: 60px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.data .grid-content div:first-child {
  color: #ff6900;
  font-weight: 800;
}
.data {
  margin-top: 10px;
}
.data .grid-content div {
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.content .content_float .item:hover{
  box-shadow: 5px 5px 5px 5px rgba(29, 26, 26, 0.945);
  animation: change 3s  linear alternate;
}
@keyframes change{
        from{
            opacity: 0.5;
        }
        to{
            opacity: 1;
        }
}

.content .content_float .item{
  border: 1px solid rgba(75, 71, 71, 0.212);
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.content .content_right .wrap{
    height: 140px;
    border: 2px dashed rgb(173, 255, 47);
    margin-top: 10px;
    border-radius: 10px;
     background-image: url('./icon/1.jpg');
     background-position: 0% 20%;
}
.content .content_right .wrap:hover{
  box-shadow: 5px 5px 5px 5px rgba(29, 26, 26, 0.945);
animation: charge 3s  infinite linear alternate;
}
.content .content_right .wrap .word_wrap .name ul li{
list-style: none;
}
 .content .content_right .wrap .word_wrap {
  height: 118.2px;
  position: absolute;
  margin-left:50px ;
  margin-top: 10px;
  cursor: pointer;
 
}
.content_right .zhaopian span {
  color: #fff;
  background-color: #ff6134;
  padding: 4px 5px;
  margin-left: 8px;
  float: left;
  border-radius: 10px;
}
.content_right .zhaopian {
  margin-top: 10px;
  cursor: pointer;
  float: left;
}
.content_right .zhaopian .zhaopian_img {
  display: block;
  height: 79px;
  width: 79px;
  border-radius: 50%;
  border: 0;
}
.content .content_float .content_float_header {
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: rgba(41, 36, 36, 0.452);
  border-radius: 10px;
}
.content .content_float .item div:last-child {
  color: #999999;
  font-size: 14px;
}
.content .content_float .item div:nth-child(2) {
  background-color: #ffb341;
  border-radius: 5px;
  font-size: 12px;
  display: inline;
  padding: 5px;
  color: white;
}
.content .content_float .item div {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.content .content_float {
  width: 48%;
  height: 700px;
  float: left;
  margin-right: 1%;
}
.content .content_right {
  width: 48%;
  height: 700px;
  float: right;
  margin-left: 1%;
}
.header #navigation {
  width: 300px;
  height: 40px;
  color: rgb(233, 106, 216);
  float: right;
}

.header .logo {
  background-image: url("http://www.myzx.cn/asset/image/logo1.png");
  width: 141px;
  height: 40px;
  object-fit: contain;
  object-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  margin-top: -20px;
}
.header {
  height: 80px;
  box-shadow: 0px 3px 8px 0px rgba(131, 125, 125, 0.555);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  border-radius: 5px;
}
@keyframes charge{   /* 利用移动实现动画效果 */
    from{
      opacity: 0.5;
         background-position: 0% 20%;
         border:  2px dashed  rgb(173, 255, 47);
    }
    to{
       background-position: 100% 20%;
         border:  2px dashed  rgb(255, 255, 255);
         opacity: 1;
    }
}
</style>